<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IconHunter V2 - 应用详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#eef2ff',
                            100: '#e0e7ff',
                            200: '#c7d2fe',
                            300: '#a5b4fc',
                            400: '#818cf8',
                            500: '#6366f1',
                            600: '#4f46e5',
                            700: '#4338ca',
                            800: '#3730a3',
                            900: '#312e81'
                        },
                        pastel: {
                            blue: '#A7C7E7',
                            green: '#C1E1C1',
                            pink: '#FAC8C3',
                            yellow: '#FFF2B3',
                            purple: '#D1C2E0'
                        }
                    },
                    animation: {
                        'bounce-slow': 'bounce 3s infinite',
                        'pulse-slow': 'pulse 4s infinite',
                        'wiggle': 'wiggle 1.5s ease-in-out infinite',
                        'float': 'float 5s ease-in-out infinite',
                        'spin-slow': 'spin 8s linear infinite'
                    },
                    keyframes: {
                        wiggle: {
                            '0%, 100%': { transform: 'rotate(-2deg)' },
                            '50%': { transform: 'rotate(2deg)' },
                        },
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        }
                    }
                }
            }
        }
    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            -webkit-user-select: none;
            user-select: none;
            overflow: hidden;
            background-color: #f8f9fa;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        .back-btn {
            transition: all 0.3s ease;
        }
        
        .back-btn:hover {
            transform: translateX(-3px);
        }
        
        .share-btn {
            transition: all 0.3s ease;
        }
        
        .share-btn:hover {
            transform: rotate(15deg);
        }
        
        .icon-preview {
            transition: all 0.3s ease;
            transform-origin: center;
        }
        
        .icon-preview:hover {
            transform: scale(1.05);
        }
        
        .download-btn {
            transition: all 0.3s ease;
        }
        
        .download-btn:hover {
            transform: translateY(-3px);
        }
        
        .format-btn {
            transition: all 0.3s ease;
        }
        
        .format-btn:hover {
            transform: scale(1.02);
        }
        
        .tag {
            transition: all 0.3s ease;
        }
        
        .tag:hover {
            transform: scale(1.1);
        }
        
        .similar-app {
            transition: all 0.3s ease;
        }
        
        .similar-app:hover {
            transform: translateY(-5px);
        }
        
        .blob-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.05;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 446.3 261.8 C 444.4 324.3 416.9 385.5 369.3 418.1 C 321.7 450.7 254 454.8 199.9 429.5 C 145.8 404.2 105.4 349.4 90.6 290.4 C 75.8 231.4 86.6 168.1 119.7 119.8 C 152.8 71.5 208.1 38.2 266.1 34.2 C 324.1 30.2 384.7 55.5 422.7 101 C 460.7 146.5 476.1 212.2 466.2 270.6 C 463.3 290.8 453.9 310.5 446.3 261.8 Z' fill='%233b82f6'%3E%3C/path%3E%3C/svg%3E");
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body class="bg-gradient-to-b from-blue-50 to-purple-50 h-screen relative">
    <div class="blob-background"></div>
    
    <!-- iOS 状态栏 -->
    <div class="bg-black text-white flex justify-between items-center px-4 py-2">
        <div class="text-sm font-medium">9:41</div>
        <div class="flex space-x-1">
            <i class="fa-solid fa-signal"></i>
            <i class="fa-solid fa-wifi"></i>
            <i class="fa-solid fa-battery-full"></i>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="h-[calc(100%-112px)] overflow-y-auto no-scrollbar">
        <!-- 头部导航 -->
        <div class="px-4 py-3 flex justify-between items-center bg-white sticky top-0 z-10 border-b border-gray-200 shadow-sm">
            <a href="#" class="back-btn text-primary-500 flex items-center">
                <i class="fa-solid fa-chevron-left text-lg"></i>
                <span class="ml-1 font-medium">返回</span>
            </a>
            <h1 class="text-lg font-semibold text-gray-800">应用详情</h1>
            <button class="share-btn text-primary-500 w-8 h-8 rounded-full bg-primary-50 flex items-center justify-center">
                <i class="fa-solid fa-share-nodes"></i>
            </button>
        </div>

        <!-- 应用信息卡片 -->
        <div class="px-6 py-6 bg-white border-b border-gray-200">
            <div class="flex items-start">
                <div class="relative">
                    <div class="absolute inset-0 bg-gradient-to-br from-primary-300 to-primary-600 rounded-3xl opacity-20 animate-pulse-slow"></div>
                    <img src="https://images.unsplash.com/photo-1613826488249-b67a21519743?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Figma" class="w-24 h-24 rounded-3xl mr-4 shadow-lg border border-gray-100 relative z-10">
                    
                    <!-- 装饰性元素 - 小星星 -->
                    <div class="absolute -top-2 -right-2 w-6 h-6 text-yellow-400 animate-spin-slow">
                        <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
                        </svg>
                    </div>
                </div>
                
                <div class="flex-1 ml-4">
                    <div class="flex justify-between">
                        <h2 class="text-2xl font-bold text-gray-800">Figma</h2>
                        <div class="bg-blue-100 text-blue-600 text-xs px-2.5 py-1 rounded-full font-medium flex items-center">
                            <i class="fa-brands fa-apple mr-1"></i>
                            iOS
                        </div>
                    </div>
                    <p class="text-gray-500 text-sm mt-1">Figma, Inc.</p>
                    <div class="flex items-center mt-2">
                        <div class="flex">
                            <i class="fa-solid fa-star text-yellow-400 text-sm"></i>
                            <i class="fa-solid fa-star text-yellow-400 text-sm"></i>
                            <i class="fa-solid fa-star text-yellow-400 text-sm"></i>
                            <i class="fa-solid fa-star text-yellow-400 text-sm"></i>
                            <i class="fa-solid fa-star-half-alt text-yellow-400 text-sm"></i>
                        </div>
                        <span class="text-sm text-gray-500 ml-2">4.8 (2.5k 评分)</span>
                    </div>
                    <div class="flex flex-wrap mt-3">
                        <span class="tag bg-gray-100 text-gray-600 text-xs px-2.5 py-1 rounded-full mr-2 mb-1 hover:bg-primary-100 hover:text-primary-600">设计</span>
                        <span class="tag bg-gray-100 text-gray-600 text-xs px-2.5 py-1 rounded-full mr-2 mb-1 hover:bg-primary-100 hover:text-primary-600">工具</span>
                        <span class="tag bg-gray-100 text-gray-600 text-xs px-2.5 py-1 rounded-full mr-2 mb-1 hover:bg-primary-100 hover:text-primary-600">协作</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 应用描述 -->
        <div class="px-6 py-5 bg-white border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-800 mb-2 flex items-center">
                <i class="fa-solid fa-circle-info text-primary-400 mr-2"></i>
                应用描述
            </h3>
            <p class="text-gray-600 text-sm leading-relaxed bg-gray-50 p-4 rounded-xl border border-gray-100">
                Figma 是一款基于浏览器的协作式界面设计工具。它让设计团队能够实时协作，轻松创建、测试和发布设计作品。从线框图到高保真设计，从原型交互到开发交接，Figma 可以满足现代设计工作流的所有需求。
            </p>
            <button class="text-primary-500 text-sm font-medium mt-3 flex items-center">
                <span>显示更多</span>
                <i class="fa-solid fa-chevron-down ml-1 text-xs"></i>
            </button>
        </div>

        <!-- 图标下载 -->
        <div class="px-6 py-5 bg-white border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                <i class="fa-solid fa-download text-primary-400 mr-2"></i>
                图标下载
            </h3>
            
            <div class="grid grid-cols-3 gap-4 mb-5">
                <div class="flex flex-col items-center">
                    <div class="icon-preview w-20 h-20 bg-white rounded-xl mb-2 shadow-md flex items-center justify-center p-1 border border-gray-100">
                        <img src="https://images.unsplash.com/photo-1613826488249-b67a21519743?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="App Icon" class="w-16 h-16 rounded-lg animate-float" style="animation-delay: 0.2s">
                    </div>
                    <span class="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">16 x 16</span>
                </div>
                
                <div class="flex flex-col items-center">
                    <div class="icon-preview w-20 h-20 bg-white rounded-xl mb-2 shadow-md flex items-center justify-center p-0.5 border border-gray-100">
                        <img src="https://images.unsplash.com/photo-1613826488249-b67a21519743?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="App Icon" class="w-18 h-18 rounded-lg animate-float" style="animation-delay: 0.4s">
                    </div>
                    <span class="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">32 x 32</span>
                </div>
                
                <div class="flex flex-col items-center">
                    <div class="icon-preview w-20 h-20 bg-white rounded-xl mb-2 shadow-md flex items-center justify-center border border-gray-100">
                        <img src="https://images.unsplash.com/photo-1613826488249-b67a21519743?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="App Icon" class="w-full h-full rounded-lg animate-float" style="animation-delay: 0.6s">
                    </div>
                    <span class="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">64 x 64</span>
                </div>
            </div>
            
            <div class="grid grid-cols-3 gap-4 mb-6">
                <div class="flex flex-col items-center">
                    <div class="icon-preview w-20 h-20 bg-white rounded-xl mb-2 shadow-md flex items-center justify-center border border-gray-100">
                        <img src="https://images.unsplash.com/photo-1613826488249-b67a21519743?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="App Icon" class="w-full h-full rounded-lg animate-float" style="animation-delay: 0.8s">
                    </div>
                    <span class="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">128 x 128</span>
                </div>
                
                <div class="flex flex-col items-center">
                    <div class="icon-preview w-20 h-20 bg-white rounded-xl mb-2 shadow-md flex items-center justify-center border border-gray-100">
                        <img src="https://images.unsplash.com/photo-1613826488249-b67a21519743?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="App Icon" class="w-full h-full rounded-lg animate-float" style="animation-delay: 1s">
                    </div>
                    <span class="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">256 x 256</span>
                </div>
                
                <div class="flex flex-col items-center">
                    <div class="icon-preview w-20 h-20 bg-white rounded-xl mb-2 shadow-md flex items-center justify-center border border-gray-100">
                        <img src="https://images.unsplash.com/photo-1613826488249-b67a21519743?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="App Icon" class="w-full h-full rounded-lg animate-float" style="animation-delay: 1.2s">
                    </div>
                    <span class="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">512 x 512</span>
                </div>
            </div>
            
            <div class="mt-6 space-y-3">
                <button class="download-btn w-full bg-gradient-to-r from-primary-500 to-primary-600 text-white py-3.5 rounded-xl font-medium flex items-center justify-center shadow-md hover:shadow-lg">
                    <i class="fa-solid fa-file-zipper mr-2"></i>
                    下载所有尺寸（ZIP）
                </button>
                <div class="flex justify-between mt-3 space-x-3">
                    <button class="format-btn flex-1 bg-white text-primary-500 py-3 rounded-xl font-medium border border-primary-200 shadow-sm flex items-center justify-center hover:bg-primary-50">
                        <i class="fa-solid fa-bezier-curve mr-2"></i>
                        SVG 格式
                    </button>
                    <button class="format-btn flex-1 bg-white text-primary-500 py-3 rounded-xl font-medium border border-primary-200 shadow-sm flex items-center justify-center hover:bg-primary-50">
                        <i class="fa-regular fa-file-image mr-2"></i>
                        PNG 格式
                    </button>
                </div>
            </div>
        </div>

        <!-- 类似应用 -->
        <div class="px-6 py-5 bg-white">
            <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                <i class="fa-solid fa-bolt text-primary-400 mr-2"></i>
                类似应用
            </h3>
            <div class="flex space-x-4 overflow-x-auto pb-2 no-scrollbar">
                <div class="similar-app flex flex-col items-center w-20 shrink-0">
                    <div class="relative w-16 h-16">
                        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-blue-500 rounded-xl opacity-20 animate-pulse-slow"></div>
                        <div class="w-16 h-16 rounded-xl bg-white shadow-md flex items-center justify-center p-1 border border-gray-100 relative z-10">
                            <img src="https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Slack" class="w-12 h-12 rounded-lg">
                        </div>
                    </div>
                    <span class="text-xs text-gray-600 mt-2 font-medium">Slack</span>
                </div>
                <div class="similar-app flex flex-col items-center w-20 shrink-0">
                    <div class="relative w-16 h-16">
                        <div class="absolute inset-0 bg-gradient-to-br from-green-300 to-green-500 rounded-xl opacity-20 animate-pulse-slow" style="animation-delay: 0.5s"></div>
                        <div class="w-16 h-16 rounded-xl bg-white shadow-md flex items-center justify-center p-1 border border-gray-100 relative z-10">
                            <img src="https://images.unsplash.com/photo-1595664652035-413d5a9b2903?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Sketch" class="w-12 h-12 rounded-lg">
                        </div>
                    </div>
                    <span class="text-xs text-gray-600 mt-2 font-medium">Sketch</span>
                </div>
                <div class="similar-app flex flex-col items-center w-20 shrink-0">
                    <div class="relative w-16 h-16">
                        <div class="absolute inset-0 bg-gradient-to-br from-red-300 to-red-500 rounded-xl opacity-20 animate-pulse-slow" style="animation-delay: 1s"></div>
                        <div class="w-16 h-16 rounded-xl bg-white shadow-md flex items-center justify-center p-1 border border-gray-100 relative z-10">
                            <img src="https://images.unsplash.com/photo-1569017388730-020b5f80a004?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Adobe XD" class="w-12 h-12 rounded-lg">
                        </div>
                    </div>
                    <span class="text-xs text-gray-600 mt-2 font-medium">Adobe XD</span>
                </div>
                <div class="similar-app flex flex-col items-center w-20 shrink-0">
                    <div class="relative w-16 h-16">
                        <div class="absolute inset-0 bg-gradient-to-br from-purple-300 to-purple-500 rounded-xl opacity-20 animate-pulse-slow" style="animation-delay: 1.5s"></div>
                        <div class="w-16 h-16 rounded-xl bg-white shadow-md flex items-center justify-center p-1 border border-gray-100 relative z-10">
                            <img src="https://images.unsplash.com/photo-1611162616305-c69b3710ff62?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Miro" class="w-12 h-12 rounded-lg">
                        </div>
                    </div>
                    <span class="text-xs text-gray-600 mt-2 font-medium">Miro</span>
                </div>
                <div class="similar-app flex flex-col items-center w-20 shrink-0">
                    <div class="relative w-16 h-16">
                        <div class="absolute inset-0 bg-gradient-to-br from-yellow-300 to-yellow-500 rounded-xl opacity-20 animate-pulse-slow" style="animation-delay: 2s"></div>
                        <div class="w-16 h-16 rounded-xl bg-white shadow-md flex items-center justify-center p-1 border border-gray-100 relative z-10">
                            <img src="https://images.unsplash.com/photo-1567443024551-f3e3a5e1a7a8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Notion" class="w-12 h-12 rounded-lg">
                        </div>
                    </div>
                    <span class="text-xs text-gray-600 mt-2 font-medium">Notion</span>
                </div>
            </div>
            
            <!-- 制作者信息 -->
            <div class="mt-8 bg-gray-50 rounded-xl p-4 border border-gray-100">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center text-primary-500">
                            <i class="fa-solid fa-heart"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-700">由 IconHunter 团队整理</p>
                            <p class="text-xs text-gray-500">寻找最好的应用图标</p>
                        </div>
                    </div>
                    <button class="text-primary-500 text-sm bg-white px-3 py-1.5 rounded-full shadow-sm border border-primary-100">
                        关注
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="bg-white fixed bottom-0 w-full h-20 shadow-lg border-t border-gray-200 flex justify-around items-center px-6 rounded-t-3xl">
        <a href="#" class="flex flex-col items-center text-gray-400">
            <div class="w-12 h-12 rounded-full flex items-center justify-center mb-1">
                <i class="fa-solid fa-house text-xl"></i>
            </div>
            <span class="text-xs">首页</span>
        </a>
        <a href="#" class="flex flex-col items-center text-primary-500 relative">
            <div class="w-12 h-12 bg-primary-50 rounded-full flex items-center justify-center mb-1">
                <i class="fa-solid fa-magnifying-glass text-xl"></i>
            </div>
            <span class="text-xs font-medium">搜索</span>
            <span class="absolute w-1.5 h-1.5 bg-primary-500 rounded-full -bottom-1"></span>
        </a>
        <a href="#" class="flex flex-col items-center text-gray-400">
            <div class="w-12 h-12 rounded-full flex items-center justify-center mb-1">
                <i class="fa-solid fa-clock-rotate-left text-xl"></i>
            </div>
            <span class="text-xs">历史</span>
        </a>
        <a href="#" class="flex flex-col items-center text-gray-400">
            <div class="w-12 h-12 rounded-full flex items-center justify-center mb-1">
                <i class="fa-solid fa-gear text-xl"></i>
            </div>
            <span class="text-xs">设置</span>
        </a>
    </div>
</body>
</html> 